<script setup lang="ts">
import router from '@/router'
import { GET_ACCESSTOKEN } from '@/utils/globalUtils'

/**
 * 根据路径跳转路由
 * @param path 路由路径
 */
function pathRoute(path: string) {
  router.push({ path })
}

// 从缓存中获取token
const accessToken = JSON.parse(String(GET_ACCESSTOKEN()))
const tableData: any = []
tableData.push(accessToken)
</script>

<template>
  <div class="welcome">
    <el-card>
      <b>东航物流快速开发平台</b>
    </el-card>
    <el-row :span="24">
      <el-space class="features">
        <el-card @click="pathRoute('/login')">
          <template #header>
            <div>
              <span>登录页面</span>
            </div>
          </template>
          <p>/login</p>
        </el-card>
        <el-card @click="pathRoute('/consent')">
          <template #header>
            <div>
              <span>授权确认页面</span>
            </div>
          </template>
          <p>/consent</p>
        </el-card>
        <el-card @click="pathRoute('/activate')">
          <template #header>
            <div>
              <span>设备码验证页面</span>
            </div>
          </template>
          <p>/activate</p>
        </el-card>
        <el-card @click="pathRoute('/activated')">
          <template #header>
            <div>
              <span>验证成功页面</span>
            </div>
          </template>
          <p>/activated</p>
        </el-card>
        <el-card @click="pathRoute('/OAuth2Redirect')">
          <template #header>
            <div>
              <span>授权码模式</span>
            </div>
          </template>
          <p>发起授权码模式的授权申请</p>
        </el-card>
        <el-card @click="pathRoute('/PkceRedirect')">
          <template #header>
            <div>
              <span>PKCE模式</span>
            </div>
          </template>
          <p>发起PKCE模式的授权申请</p>
        </el-card>
      </el-space>
    </el-row>
    <el-row :span="24">
      <el-space class="features">
        <el-card>
          <template #header>
            <div>
              <span>Token展示</span>
            </div>
          </template>
          <el-table :data="tableData" :border="true">
            <el-table-column
              prop="token_type"
              label="token_type"
              width="150"
            />
            <el-table-column
              prop="access_token"
              label="access_token"
              width="150"
            />
          </el-table>
        </el-card>
      </el-space>
    </el-row>
  </div>
</template>

<style scoped>
.welcome {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.features {
  padding: 8px;
}

.features div {
  cursor: pointer;
}
</style>
